@charset "UTF-8";

@import './_reset';

.navbar{
	height: 97px;
	z-index: 999;
	margin-bottom: 0;
}
.logo{
	display: flex;
	align-items: center;
	height: 100%;
	img{
		width: 100%;
		height: 100%;
	}
}
.navbar-inverse {
    background-color: #000000;
    border-color: #080808;
}
.navbar-brand {

    padding: 0px 15px;

}
.nav{
	margin-top: 23px;
	
	// height: 72px;
	>li{
		// font-size: 20px;
		position: relative;
		margin-right: 5px;
	}
	>li::before{
		content: "";
		background-color: red;
		width: 0;
		height: 1px;
		position: absolute;
		top: -5px;
		left: 50%;
		transition: all .5s;
	}
	>li:hover::before{
		width: 100%;
		left: 0;
	}
	>li:nth-child(1)::after{
		content: "小";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(2)::after{
		content: "欣";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(3)::after{
		content: "子";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(4)::after{
		content: "520";
		// font-size: 100%;
		font-size: 50px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -30px;
		transition: all .5s;
	}
	>li:nth-child(5)::after{
		content: "61节";
		// font-size: 100%;
		font-size: 40px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		bottom: -24px;
		transition: all .5s;
	}
	>li:nth-child(6)::after{
		content: "快乐呀";
		// font-size: 100%;
		font-size: 40px;
		color: deeppink;
		opacity: 0;
		position: absolute;
		top: 60%;
		left: 25%;
		transition: all .5s;
	}
	>li:hover::after{
		opacity: 1;
	}
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: hotpink;
	border-radius: 5px;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
    color: #fff;
    background-color: rgba(255,105,180,.5);
	border-radius: 5px;
}


@media only screen and (min-width:768px) and (max-width:991px){
	.logo{
		margin-right: 0;
		img{
			width: 100%;
			height: 100%;
		}
	}
	.navbar-brand{
		padding-left: 3px;
		padding-right: 3px;
	}
	.nav>li>a{
		padding: 15px 15px;

	}
}


.navbar-toggle {
	  position: relative;
	  float: right;
	  padding: 9px 10px;
	  margin-top: 26px;
	  margin-right: 15px;
	  margin-bottom: 8px;
	  background-color: transparent;
	  background-image: none;
	  border: 1px solid transparent;
	  border-radius: 4px;
}

.audiobox{
	width: 100%;
	height: 80px;
	background-color:black;
	display: flex;
	justify-content: space-around;
	align-content: center;
	align-items: center;
	.tip{
		font-family: 'Pacifico', cursive;
	}
}



@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

body {
  // display: flex;
  // flex-direction: column;
  // height: 100vh;
  // justify-content: center;
  // align-items: center;
  background-image: linear-gradient(
      rgba(16, 16, 16, 0.8),
      rgba(16, 16, 16, 0.8)
    ),
    url(../img/PIC/BGCIMAGE.jpg);
  background-size: cover;
  background-color: #000000;
}

p {
  margin: 0em 5em 1em 5em;
  text-align: left;
}

h1, p {
  
  line-height: 1.8;
  font-family: Lora, serif;
  font-size: 20px;
  text-indent: 2em;
}
h1{
	text-align: center;
}


.glowIn {
  color: white;

  span {
    animation: glow-in 0.8s both;
  }
}

@keyframes glow-in {
  from {
    opacity: 0;
  }
  65% {
    opacity: 1;
    text-shadow: 0 0 25px white;
  }
  75% {
    opacity: 1;
  }
  to {
    opacity: 0.7;
  }
}
@media only screen and (max-width:768px){
	p {
	  margin: 0em 1em 4em 1em;
	}
}


@import url('https://fonts.googleapis.com/css?family=Bubblegum+Sans&display=swap');



.bubbling {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: white;
  font-size: 2.5rem;
  font-family: 'Bubblegum Sans', cursive;
  font-weight: bold;
  text-transform: uppercase;
}

.bubble {
  position: absolute;
  background: white;
  border-radius: 100%;
}


@import url("https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap");

@function float-text-3d($shadow-color: #bbb, $depth: 10, $floating: false) {
  $shadows: ();

  // When dropped, it will shrink like a spring. When floating, it grows into its shape.
  @for $i from 1 to $depth {
    @if ($floating == false and $i > $depth / 2) {
      $shadow-color: transparent;
    }
    $shadows: append($shadows, 0 ($i * 1px) $shadow-color, comma);
  }

  // When dropped, the shadow reveals. When floating, the shadow fades.
  @if ($floating == false) {
    $shadows: append($shadows, 0 10px 10px rgba(0, 0, 0, 0.4), comma);
  } @else {
    $shadows: append($shadows, 0 50px 25px rgba(0, 0, 0, 0.2), comma);
  }

  @return $shadows;
}



.loading {
  display: flex;
  color: white;
  font-size: 3em;
  font-family: "Baloo Bhaijaan", cursive;
  text-transform: uppercase;

  span {
    text-shadow: float-text-3d($floating: false);
    transform: translateY(20px);
    animation: bounce 0.3s ease infinite alternate;
  }
}

@keyframes bounce {
  to {
    text-shadow: float-text-3d($floating: true);
    transform: translateY(-20px);
  }
}

@import url(https://fonts.googleapis.com/css?family=Lato);



.btn {
  --hue: 190;
  position: relative;
  padding: 1rem 3rem;
  font-size: 1rem;
  line-height: 1.5;
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  background-color: hsl(var(--hue), 100%, 41%);
  border: 1px solid hsl(var(--hue), 100%, 41%);
  outline: transparent;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: 0.25s;

  &:hover {
    background: hsl(var(--hue), 100%, 31%);
  }

  &-primary {
    --hue: 187;
  }

  &-ghost {
    color: hsl(var(--hue), 100%, 41%);
    background-color: transparent;
    border-color: hsl(var(--hue), 100%, 41%);

    &:hover {
      color: white;
    }
  }

  &-shine {
    color: white;

    &::before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        120deg,
        transparent,
        hsla(var(--hue), 100%, 41%, 0.5),
        transparent
      );
      transform: translateX(-100%);
      transition: 0.6s;
    }

    &:hover {
      background: transparent;
      box-shadow: 0 0 20px 10px hsla(var(--hue), 100%, 41%, 0.5);
    }

    &:hover::before {
      transform: translateX(100%);
    }
  }
}